<template>
    <div>
        <ul>
            <li style="color: #42b983">首页</li>
            <li class="feeLi">
                <a-dropdown >
                    <a-menu slot="overlay" @click="handleMenuClick" style="background-color: white;z-index: 999;overflow: hidden" >
                        <a-menu-item   v-for="(item,index) in List" :key="index">{{item.title}} </a-menu-item>
<!--                        <a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>-->
<!--                        <a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>-->
                    </a-menu>
                    <a-button style="margin-left: 8px; border: none;line-height: 2px"> 课程详情 <a-icon type="down" /> </a-button>
                </a-dropdown>
            </li>
            <li>专属课程</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "trainingfee",
        data(){
            return{
                List:[],
                flag: false
            }
        },
        methods: {
            handleButtonClick(e) {
                console.log('click left button', e);
            },
            handleMenuClick(e) {
                console.log('click', e);
            },
        },

        created() {
            this.$axios.post('http://wkt.myhope365.com/weChat/applet/subject/list', {enable:1}).then(res=>{
                console.log(res.data.rows);
               this.List = res.data.rows
            })
        }
    }
</script>

<style scoped lang="less">
div{
    margin-top: 30px;
    font-size: 16px;
    float: left;

}
.feeLi {
    position: relative;
}
div>ul>li{
    float: left;
    margin-right: 20px;
}
/*.feeUl{*/
/*    z-index: 999;*/
/*    position: absolute;*/
/*}*/

</style>